<template>
    <div>
        <tabbar :msg="'/home'"></tabbar>
        <!-- 轮播图 -->
        <div style="padding-top: 50px;">
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                <van-swipe-item>
                    <div class="swipe-item bg1">
                        <div class="gradient-text">
                            <div>HwgPay</div>
                            <div>让科技改变生活 让生活更加美好</div>
                        </div>
                    </div>
                </van-swipe-item>
            </van-swipe>
        </div>
        <!-- 交易额 -->
        <div class="trad_box">
            <van-row :gutter="20">
                <van-col :span="6">
                    <div class="trad_item">
                        <div>5亿+</div>
                        <div>月交易额</div>
                    </div>
                </van-col>
                <van-col :span="6">
                    <div class="trad_item">
                        <div>100万+</div>
                        <div>日交易笔数</div>
                    </div>
                </van-col>
                <van-col :span="6">
                    <div class="trad_item">
                        <div>10万+</div>
                        <div>商户一致选择</div>
                    </div>
                </van-col>
                <van-col :span="6">
                    <div class="trad_item">
                        <div>600座+</div>
                        <div>累计覆盖城市</div>
                    </div>
                </van-col>
            </van-row>
        </div>
        <!-- 业务合作流程 -->
        <div class="work">
            <div class="title" style="padding-bottom: 11px;">业务合作流程</div>
            <img src="../../images/home/bg5.png" alt="">
        </div>
        <!-- 核心优势 -->
        <div class="core_box">
            <div class="title">核心优势</div>
            <div class="core_li">
                <van-row gutter="24">
                    <van-col span="12">
                        <div class="core_item">
                            <img src="../../images/home/icon1.png" alt="">
                            <div class="core_title">产品丰富</div>
                            <div class="core_desc">
                                丰富的线上线下产品贴近商户各类场景需求
                            </div>
                        </div>
                    </van-col>
                    <van-col span="12">
                        <div class="core_item">
                            <img src="../../images/home/icon2.png" alt="">
                            <div class="core_title">接入便捷</div>
                            <div class="core_desc">
                                7*24小时高效服务，随时随地满足商户需求
                            </div>
                        </div>
                    </van-col>
                    <van-col span="12">
                        <div class="core_item">
                            <img src="../../images/home/icon3.png" alt="">
                            <div class="core_title">多行业解决方案</div>
                            <div class="core_desc">
                                专业团队，解决行业痛点，全力助力商户发展，提高经营效率
                            </div>
                        </div>
                    </van-col>
                    <van-col span="12">
                        <div class="core_item">
                            <img src="../../images/home/icon4.png" alt="">
                            <div class="core_title">安全合规</div>
                            <div class="core_desc">
                                信息系统安全等级防护备案，中国清算协会聚合支付备案认证
                            </div>
                        </div>
                    </van-col>
                </van-row>
            </div>
        </div>
        <!-- 我们的服务 -->
        <!-- <div class="service">
            <div class="title" style="padding-top: 14px;">我们的服务</div>
            <div class="service_li">
                通过不断创新和聚焦支付领域，我们联手优质合作伙伴，帮助商家降低新客决策成本，提升转化效率、锁定消费周期，实现高效拉新，让更多商家与消费者共享数字信用的红利；同时以信用消费模式推动社会信用体系建设，助力商家「无单变有单，小单变大单」，在普惠大众的同时保障商家与消费者权益。
            </div>
        </div> -->
        <!-- 行业解决方案 -->
        <div style="padding-bottom: 24px;margin-top: 20px;">
            <!-- <div class="title">行业解决方案</div> -->
            <div class="solution_li">
                <div class="solution_item">
                    <img src="../../images/home/icon5.png" alt="">
                    <div class="solution_content">
                        <div>聚合支付</div>
                        <div>全场景、高效管理、系统化</div>
                        <div>全场景覆盖，从根本上解决渠道复杂接入成本高、财务管理难的复杂问题，系统化管理让接入更加便捷高效。</div>
                    </div>
                    <div class="solution_more" @click="$router.push('/juhe')">查看更多></div>
                </div>
                <div class="solution_item">
                    <img src="../../images/home/icon6.png" alt="">
                    <div class="solution_content">
                        <div>线上支付</div>
                        <div>合规、安全、专业</div>
                        <div>多项行业权威认证，精确匹配分账业务场景诉求，为商户保驾护航。</div>
                    </div>
                    <div class="solution_more" @click="$router.push('/xianshang')">查看更多></div>
                </div>
                <div class="solution_item">
                    <img src="../../images/home/icon7.png" alt="">
                    <div class="solution_content">
                        <div>先享后付</div>
                        <div>灵活、便捷、低门槛</div>
                        <div>为用户创造“因为信用，所以简单"的便捷生活方式。</div>
                    </div>
                    <div class="solution_more" @click="$router.push('/xianxiang')">查看更多></div>
                </div>
            </div>
        </div>

        <!-- 合作伙伴 -->
        <div class="hz">
            <div class="title">合作伙伴</div>
            <div class="hz_img" ref="hzImg">
                <img v-for="img, index in images" :key="index" :src="img" alt="">
                <img v-for="(img, index) in images" :key="'copy-' + index" :src="img" alt="">
                <img v-for="(img, index) in images" :key="'copys-' + index" :src="img" alt="">
            </div>
        </div>
        <!-- 解决方案 -->
        <div class="pay_sel">
            <div>获取一对一支付解决方案</div>
            <div @click="$router.push('/business')">定制您的解决方案 <img src="../../images/home/icon_you_sel1.png" alt=""></div>
        </div>
        <!-- 底部 -->
        <footers></footers>
    </div>
</template>
<script>
import tabbar from "@/components/tabbar";
import footers from "@/components/footer";
export default {
    name: 'home',
    components: {
        tabbar, footers
    },
    data() {
        return {
            images: [
                require("@/images/home/1.png"),
                require("@/images/home/2.png"),
                require("@/images/home/3.png"),
                require("@/images/home/4.png"),
                require("@/images/home/5.png"),
                require("@/images/home/6.png"),
                require("@/images/home/7.png"),
                require("@/images/home/8.png"),
                require("@/images/home/9.png"),
                require("@/images/home/10.png"),
                require("@/images/home/11.png"),
            ],
            hzImgEl: null,
        }
    }
}
</script>
<style scoped lang="scss">
.swipe-item {
    height: 152px;
    background: url('../../images/home/bg1.png') no-repeat center;
    background-size: cover;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 18px;
    color: #FFFFFF;
    line-height: 24px;
    text-align: center;
    // line-height: 152px;
    position: relative;
}

.bg1 {
    background: url('../../images/home/bg1.png') no-repeat center;
    background-size: cover;
}

.gradient-text {
    width: 100%;
    // background: linear-gradient(180deg, #EEEEEE 0%, #8BCCFF 100%);
    // -webkit-background-clip: text;
    // -webkit-text-fill-color: transparent;
    position: absolute;
    top: 50%;
    // left: 50%;
    transform: translateY(-50%);
    text-align: center;
    font-weight: bold;
    font-size: 20px;
    color: #0051C4;

    div:last-child {
        font-weight: 500;
        font-size: 14px;
        color: #0051C4;
        margin-top: 8px;
    }
}

::v-deep .van-swipe__indicator {
    width: 12px;
    height: 2px;
    border-radius: 0;
}

/* 交易额 */
.trad_box {
    width: 95%;
    margin: 0 auto;
    margin-top: 20px;
    text-align: center;
    font-style: normal;
}

.trad_item div:first-child {
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    font-size: 16px;
    color: #0051C4;
}

.trad_item div:last-child {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 12px;
    color: #333333;
    margin-top: 7px;
}

.core_box {
    width: 100%;
    background: url('../../images/home/bg2.png') no-repeat center;
    background-size: cover;

    .core_li {
        padding: 0 12px;

        .core_item {
            width: 100%;
            // height: 164px;
            // background: #FFFFFF;
            // box-shadow: 0px 0px 8px 0px rgba(158, 175, 209, 0.38);
            border-radius: 4px;
            // margin-bottom: 12px;
            display: flex;
            // justify-content: center;
            flex-direction: column;
            align-items: center;
            padding: 18px 0;
            box-sizing: border-box;

            img {
                width: 40px;
            }

            .core_title {
                font-family: PingFangSC, PingFang SC;
                font-weight: 500;
                font-size: 14px;
                color: #333;
                margin-top: 16px;
                text-align: center;
            }

            .core_desc {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 12px;
                color: #666;
                margin-top: 16px;
                text-align: center;
            }
        }
    }
}

.title {
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 16px;
    color: #333333;
    // margin: 24px 0 20px 0;
    padding: 24px 0 20px 0;
    text-align: center;
}

// 我们的服务
// .service_li {
//     padding: 30px 20px;
//     box-sizing: border-box;
//     background: url('../../images/home/bg4.png') no-repeat center;
//     background-size: cover;
//     font-family: PingFangSC, PingFang SC;
//     font-weight: 400;
//     font-size: 13px;
//     color: #FFFFFF;
//     line-height: 20px;
//     text-align: justify;
//     font-style: normal;
//     text-indent: 2rem;

// }

// 行业解决方案
.solution_li {
    padding: 0 12px;

    .solution_item {
        background: #FFFFFF;
        box-shadow: 0px 0px 8px 0px rgba(158, 175, 209, 0.38);
        border-radius: 4px;
        padding: 16px 16px 16px 12px;
        display: flex;
        justify-content: space-between;
        position: relative;
        margin-bottom: 10px;

        img {
            width: 140px;
            height: 90px;
        }

        .solution_content {
            margin-left: 9px;

            div:nth-child(1) {
                font-family: PingFangSC, PingFang SC;
                font-weight: 500;
                font-size: 14px;
                color: #0051C4;
            }

            div:nth-child(2) {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 12px;
                color: #333333;
                margin-top: 6px;
                margin-bottom: 6px;

            }

            div:nth-child(3) {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 10px;
                color: #666666;
            }
        }

        .solution_more {
            position: absolute;
            top: 12px;
            right: 12px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 10px;
            color: #0051C4;
        }
    }
}

// 业务合作流程
.work {
    // padding-bottom: 20px;

    img {
        width: 100%;
    }
}
.hz_img-container {
  width: 100%;
  overflow: hidden;
}

.hz_img {
  display: flex;
  white-space: nowrap;
  animation: hz-img-scroll 20s linear infinite;
}

.hz_img img {
  width: 204px;
}

@keyframes hz-img-scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.hz-progress {
  display: none;
}
.hz {
    background: #F7FAFF;
    background-size: cover;
    padding-bottom: 19px;
    overflow: hidden;
    .hz_img {
        width: 100%;
        margin: 0 auto;
        display: flex;
        flex-wrap: nowrap;
        // margin-top: 54px;
        /* overflow: auto; */
        img{
            width: 86px;
        }
    }
}

// 解决方案
.pay_sel {
    background: url('../../images/home/bg7.png') no-repeat center;
    background-size: cover;
    padding: 16px 0 25px 0px;
    text-align: center;
    div:first-child {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #0051C4;
    }

    div:last-child {
        // display: flex;
        // align-items: center;
        display: inline-block;
        background: #0051C4;
        border-radius: 35px;
        padding: 4px 10px;
        margin-top: 12px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 10px;
        color: #fff;
        margin-left: 2px;

        img {
            width: 12px;
            vertical-align: middle;
            margin-top: -3px;
        }
    }
}
</style>